<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>{{ title }}</h1>
        <span v-if="isCreater" class="rightBtn" @click="changeManage">{{
          manage ? "取消" : "管理"
        }}</span>
        <span v-else class="rightBtn" @click="changeManage2">{{
          manage2 ? "取消" : "纳入我的合集"
        }}</span>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="art">
      <div class="title">共10篇</div>
      <div class="list" v-if="list.length > 0">
        <van-swipe-cell
          v-for="(item, index) in list"
          :key="index"
          :disabled="manage || !isCreater"
        >
          <div
            :class="[
              'item',
              { border: manage | manage2 },
              {
                checked:
                  (checkedIds.indexOf(item.id) != -1)
                  | (checkedIds2.indexOf(item.id) != -1)
              }
            ]"
            @click.stop="choose(item)"
          >
            <div class="cont">
              <div class="line1">{{ item.name }}</div>
              <div class="line2">
                <div class="left">
                  <span v-if="item.yuanchuang == 1">本社群原创</span>
                  <span v-else-if="item.yuanchuang == 2"
                    >原创社群:【某某某社群】</span
                  >
                </div>
                <div class="right">
                  <img src="../../assets/images/adver.jpg" />
                  <span>麻小云</span>
                </div>
              </div>
            </div>
            <img class="img" src="../../assets/images/adver.jpg" />
            <div v-if="item.has && !isCreater" class="has">已在我的合集</div>
          </div>
          <template #right>
            <button type="button" class="del">删除</button>
          </template>
        </van-swipe-cell>
      </div>

      <div class="btns" v-show="manage && isCreater">
        <div class="item yellow" @click="move">移动到其它类目</div>
        <div class="item yellow2" @click="copy">复制到其它类目</div>
        <div class="item">删除</div>
      </div>

      <button v-if="!isCreater && manage2" type="button" class="btnAdd">
        纳入我的社群合集
      </button>
    </div>

    <!--  -->
    <!-- 选择行业 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :title="isCopy ? '复制到' : '移动到'"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        cancel-button-text="新建分类"
      />
    </van-popup>
  </div>
</template>

<script>
import { SwipeCell } from "vant";
import { Popup } from "vant";
import { Picker } from "vant";
export default {
  name: "",
  components: {
    vanSwipeCell: SwipeCell,
    vanPicker: Picker,
    vanPopup: Popup
  },
  props: {},
  data: function() {
    return {
      title: "推文类目名称",
      isCreater: false, //是否是创建者
      manage: false, //开启管理
      manage2: false, //收入合集
      showPicker: false,
      isCopy: "",
      list: [
        {
          id: 100,
          name:
            "标题标题标题标题标题标题标题标题标题标题标题题标题标题题标题标题题标题标题题标题标题",
          yuanchuang: 1,
          has: false
        },
        {
          id: 101,
          name: "标题标题标题标题标题2",
          yuanchuang: 2,
          has: true
        },
        {
          id: 102,
          name: "标题标题标题标题标题3",
          yuanchuang: 1,
          has: false
        }
      ],
      checkedIds: [],
      checkedIds2: [] //收入合集
    };
  },
  mounted: function() {
    this.checkedIds = [];
    this.title = this.$route.query.name;
    console.log(this.$route.query);
    this.columns = ["本社群推文类目1", "本社群推文类目2", "本社群推文类目3"];
  },
  methods: {
    changeManage() {
      this.manage = !this.manage;
      if (!this.manage) {
        this.checkedIds = [];
      }
    },
    changeManage2() {
      this.manage2 = !this.manage2;
      if (!this.manage2) {
        this.checkedIds2 = [];
      }
    },
    choose(item) {
      let id = item.id;
      if (this.isCreater) {
        if (this.manage) {
          if (this.checkedIds.indexOf(id) != -1) {
            this.checkedIds.splice(this.checkedIds.indexOf(id), 1);
          } else {
            this.checkedIds.push(id);
          }
          console.log(this.checkedIds);
        }
      } else {
        if (this.manage2) {
          if (this.checkedIds2.indexOf(id) != -1 && item.has == false) {
            this.checkedIds2.splice(this.checkedIds2.indexOf(id), 1);
          } else {
            if (!item.has) {
              this.checkedIds2.push(id);
            }
          }
          console.log(this.checkedIds2);
        }
      }
    },
    move() {
      this.isCopy = false;
      this.showPicker = true;
    },
    copy() {
      this.isCopy = true;
      this.showPicker = true;
    },
    onConfirm(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.showPicker = false;
      //复制
      if (this.isCopy) {
        this.$dialog.toast({ mes: "操作成功" });
      } else {
        //移动
        this.$dialog.toast({ mes: "操作成功" });
      }
    },
    onCancel() {
      console.log("新建分类");
      this.showPicker = false;
      this.$router.push({
        path: "/com/articleTypeAdd"
      });
    }
  }
};
</script>

<style scoped></style>
<style>
.van-picker__title {
  color: #ffffff;
}
.van-picker {
  background-color: #32303a;
}
.van-picker__cancel,
.van-picker__confirm {
  color: #999999;
  width: 90px;
}
.van-picker__confirm {
  text-align: right;
}
.van-picker__cancel:active,
.van-picker__confirm:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.van-picker-column__item {
  color: rgba(255, 255, 255, 1);
}
.van-hairline--top-bottom::after {
  border-width: 0;
}
.van-picker__mask {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(50, 48, 58, 0.9)),
      to(rgba(50, 48, 58, 0.4))
    ),
    -webkit-gradient(linear, left bottom, left top, from(rgba(50, 48, 58, 0.9)), to(rgba(50, 48, 58, 0.4)));
  background-image: linear-gradient(
      180deg,
      rgba(50, 48, 58, 0.9),
      rgba(50, 48, 58, 0.4)
    ),
    linear-gradient(0deg, rgba(50, 48, 58, 0.9), rgba(50, 48, 58, 0.4));
}
.van-picker__frame {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
